<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <el-row :gutter="20">
          <el-col :span="8" style="text-align:center">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl+'api/Files'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="user.image" :src="baseUrl+'files/'+imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-col>
          <el-col :span="16">
            <ul class="info">
              <li class="uname">{{ user.name }}</li>
              <li><span>类别：</span>{{ user.userType==1?'雇员':'雇主' }}</li>
              <li><span>手机号：</span>{{ user.phone }}</li>
              <li><span>性别：</span>{{ user.sex }}</li>
              <li><span>年龄:</span>{{ user.age }}</li>
              <li><span>地址：</span>{{ user.address }}</li>
              <li><span>注册时间：</span>{{ user.createAt }}</li>
              <li>img:{{ user.image }}</li>
            </ul>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane v-if="user.userType==1" label="工作经历">工作经历</el-tab-pane>
      <el-tab-pane v-if="user.userType==1" label="擅长领域">
        <design-tool />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import { mapGetters } from 'vuex'
import { setPhoto } from '@/api/user'
import designTool from '@/views/personal/beGoodAt.vue'
export default {
  components: {
    designTool
  },
  data() {
    return {
      imageUrl: '', // 头像地址
      baseUrl: process.env.VUE_APP_BASE_API
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },

  created() {
    this.imageUrl = this.user.image
  },

  methods: {

    // 上传头像
    handleAvatarSuccess(res, file) {
      setPhoto(this.user.id, res.data.path).then(response => {
        this.$message('设置完成！')
        this.imageUrl = res.data.path
      }).catch(err => {
        console.log(err)
      })
    },
    // 上传之前
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

  }
}
</script>
<style scoped>
.info li{
    list-style: none;
    line-height: 30px;
}
.info span{
    color: #999;
}
.uname{
    font-size: 16px;
    font-weight: 900;
}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
